Skip to content

chore(BarsIcon): Updat all uses of Bars icons to use RhUiMenuBarsIcon instead#12377

Open
tlabaj wants to merge 2 commits intopatternfly:mainfrom
tlabaj:bars_icon
Open

chore(BarsIcon): Updat all uses of Bars icons to use RhUiMenuBarsIcon instead#12377
tlabaj wants to merge 2 commits intopatternfly:mainfrom
tlabaj:bars_icon

Conversation

@tlabaj
Copy link
Copy Markdown
Contributor

@tlabaj tlabaj commented Apr 24, 2026

What: towards #12244

Summary

Replaces BarsIcon with RhUiMenuBarsIcon (rh-ui-menu-bars-icon) in components, documentation, and the integration demo app so the menu/bars icon uses the Red Hat UI asset.

Changes

  • Update imports from bars-icon to rh-ui-menu-bars-icon.
  • Replace BarsIcon with RhUiMenuBarsIcon in affected examples and demos.

Scope

  • react-core: MenuWithActions, MenuWithFavorites, ActionsMenuDemo, and shared doc imports in related .md files (Page, Masthead, Nav, CustomMenus, NotificationDrawer, RTL, Wizard, and related demos).
  • react-table: Table.md shared imports.
  • react-integration: MenuDemo.tsx.

Summary by CodeRabbit

  • Documentation

    • Updated component examples and demo docs to use the new menu-bars icon for consistent visuals across the library.
  • Chores

    • Replaced legacy menu-bars icon references in examples and demos to align with current icon usage.

Closes #12397

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 24, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: eac1a3ce-d6e9-4174-abd9-ea57d90d35d1

📥 Commits

Reviewing files that changed from the base of the PR and between 344396b and ac6b113.

📒 Files selected for processing (1)
  • packages/react-table/src/demos/Table.md
✅ Files skipped from review due to trivial changes (1)
  • packages/react-table/src/demos/Table.md

Walkthrough

Replaces imports and JSX usages of BarsIcon with RhUiMenuBarsIcon across example, demo, and markdown files in the react-core, react-integration, and react-table packages. No API, runtime behavior, or exported/public entity changes were made.

Changes

Icon replacement: BarsIcon → RhUiMenuBarsIcon

Layer / File(s) Summary
Imports Updated
packages/react-core/.../*.md, packages/react-core/.../*.tsx, packages/react-integration/.../MenuDemo.tsx, packages/react-table/src/demos/Table.md
Replaced imports from @patternfly/react-icons/.../bars-icon with @patternfly/react-icons/.../rh-ui-menu-bars-icon and the identifier RhUiMenuBarsIcon.
Component Usage
packages/react-core/src/components/Menu/examples/MenuWithActions.tsx, packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx, packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx, packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
JSX that previously rendered <BarsIcon /> now renders <RhUiMenuBarsIcon /> (e.g., MenuItemAction, menu action props).
Documentation / Demos
packages/react-core/src/components/Masthead/examples/Masthead.md, packages/react-core/src/components/Page/examples/Page.md, packages/react-core/src/demos/*/*.md, packages/react-table/src/demos/Table.md
Demo and example snippets updated to show the new icon import; example content otherwise unchanged.
Meta/Packaging (referenced)
package.json (mentioned in diff metadata)
Some diffs reference package.json locations in metadata notes but there are no substantive package.json changes in this PR.

Sequence Diagram(s)

(omitted — change is an icon import/use swap without new multi-component control flow)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers

  • wise-king-sullyman
  • phcox
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: replacing BarsIcon with RhUiMenuBarsIcon across the codebase.
Linked Issues check ✅ Passed All acceptance criteria from issue #12397 are met: BarsIcon imports replaced with RhUiMenuBarsIcon throughout the codebase.
Out of Scope Changes check ✅ Passed All changes are narrowly focused on replacing BarsIcon with RhUiMenuBarsIcon; no out-of-scope modifications are present.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@tlabaj tlabaj requested review from a team, lboehling, phcox, thatblindgeye and wise-king-sullyman and removed request for a team April 24, 2026 18:41
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md (1)

10-10: Change line 10 to use dist/esm for consistency with other imports in this file.

All other icon imports in NotificationDrawer.md use dist/esm; line 10's dist/js import creates unnecessary inconsistency.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md` at
line 10, Update the import for RhUiMenuBarsIcon to match the other icon imports
by changing the module path from
'@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon' to the esm build,
i.e. import RhUiMenuBarsIcon from
'@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon'; this keeps the
NotificationDrawer.md imports consistent with the rest of the file.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md`:
- Line 10: Update the import for RhUiMenuBarsIcon to match the other icon
imports by changing the module path from
'@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon' to the esm build,
i.e. import RhUiMenuBarsIcon from
'@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon'; this keeps the
NotificationDrawer.md imports consistent with the rest of the file.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 32b2fb26-83c4-46db-8e06-f6152a9e50f3

📥 Commits

Reviewing files that changed from the base of the PR and between 69b6225 and 0252229.

📒 Files selected for processing (15)
  • packages/react-core/src/components/Masthead/examples/Masthead.md
  • packages/react-core/src/components/Menu/examples/Menu.md
  • packages/react-core/src/components/Menu/examples/MenuWithActions.tsx
  • packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx
  • packages/react-core/src/components/Page/examples/Page.md
  • packages/react-core/src/demos/CustomMenus/CustomMenus.md
  • packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
  • packages/react-core/src/demos/Masthead.md
  • packages/react-core/src/demos/Nav.md
  • packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
  • packages/react-core/src/demos/Page.md
  • packages/react-core/src/demos/RTL/RTL.md
  • packages/react-core/src/demos/Wizard/WizardDemo.md
  • packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
  • packages/react-table/src/demos/Table.md

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 24, 2026

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace BarsIcon with RhUiMenuBarsIcon

4 participants